<template>
  <div>
    <table class="table"
           cellpadding='0'
           cellspacing='0'>
      <tr>
        <td>公司名称</td>
        <td>{{data.company}}</td>
      </tr>
      <tr>
        <td>详细地址</td>
        <td>{{data | address}}</td>
      </tr>
      <tr>
        <td>账户名称</td>
        <td>{{data.account_name}}</td>
      </tr>
      <tr>
        <td>银行名称</td>
        <td>{{data.name}}</td>
      </tr>
      <tr>
        <td>银行卡号</td>
        <td>{{data.account}}</td>
      </tr>
      <tr>
        <td>所属支行</td>
        <td>{{data.branch}}</td>
      </tr>
      <tr>
        <td>维修厂主营</td>
        <td>{{data.major}}</td>
      </tr>
      <tr>
        <td>技师数量</td>
        <td>
          <a @click="state=0,dialogVisible.technician=true,listQuery.params.sid=data.sid,init()"
             class="">{{data.tech_num}} 位</a>
        </td>
      </tr>
      <tr>
        <td>关停次数</td>
        <td>
          <a @click="state=1,dialogVisible.technician=true,listQuery.params.sid=data.sid,init()">{{data.down_num}} 次</a>
        </td>
      </tr>
      <tr>
        <td>好评次数</td>
        <td>
          <a @click="state=2,dialogVisible.technician=true,listQuery.params.sid=data.sid,init()">{{data.comment_num}} 次</a>
        </td>
      </tr>
      <tr>
        <td>投诉次数</td>
        <td>
          <a @click="state=3,dialogVisible.technician=true,listQuery.params.sid=data.sid,init()">{{data.complain_count}} 次</a>
        </td>
      </tr>
      <tr>
        <td>关注度</td>
        <td>
          <a @click="state=4,dialogVisible.technician=true,listQuery.params.sid=data.sid,init()">{{data.attention_num}} 次</a>
        </td>
      </tr>
    </table>
    <v-dialog width='40%'
              :initTotal.sync='listQuery.total'
              :title="state==0 ? '技师详情' : state==1 ? '关停详情' : state==2? '好评详情' : state==3 ? '投诉详情' : '关注度详情'"
              :show.sync='dialogVisible.technician'
              append-to-body>
      <v-table :tableData='listQuery.data'
               :total='listQuery.total'
               :page.sync='listQuery.params.page'
               :limit.sync='listQuery.params.pageSize'
               :tableLabel='tableLabel'
               @pagination='init()'
               @operation='rewardDetails' />
      <v-dialog title="奖励详情"
                width='55%'
                :initTotal.sync='rewardQuery.total'
                :show.sync='dialogVisible.reward'
                append-to-body>
        <v-table :tableData='rewardQuery.data'
                 :total='rewardQuery.total'
                 :limit.sync='rewardQuery.params.pageSize'
                 :page.sync='rewardQuery.params.page'
                 @pagination='rewardDetails'
                 :tableLabel="rewardQuery.Label" />
      </v-dialog>
    </v-dialog>
  </div>
</template>
<script>
export default {
  name: 'Dialog',
  data () {
    return {
      dialogVisible: {
        technician: false, //技师详情弹框状态
        reward: false, //奖励金额弹框状态
      },
      state: 0, // 0-技师数量详情 1-关停次数详情 2-好评次数详情 3-投诉次数详情
      listQuery: {
        data: [],
        total: 0,
        technicianLabel: [   //技师数量 table label
          { label: '技师名称', prop: 'name' },
          { label: '联系方式', prop: 'phone' },
          { label: '技能简介', prop: 'skill', popover: true },
          { label: '奖励金额', prop: 'reward', type: 'text' },
          { label: '从业时间', prop: 'server' },
          { label: '认证时间', prop: 'certify_time' }
        ],
        shutDownLabel: [    //关停次数table label
          { label: '关停理由', prop: 'reason' },
          { label: '关停时间', prop: 'create_time' }
        ],
        praiseLabel: [  //好评次数table label
          { label: '邦保养卡号', prop: 'card_number', popover: true },
          { label: '用户姓名', prop: 'name' },
          { label: '用户电话', prop: 'phone' },
          { label: '车辆类型', prop: 'car_type' },
          { label: '车排量', prop: 'series' },
          { label: '用油名称', prop: 'oil_name' },
          { label: '好评奖励', prop: 'money' },
          { label: '服务时间', prop: 'create_time', popover: true },
        ],
        complainLabel: [  //投诉次数table label
          { label: '邦保养卡', prop: 'card_number' },
          { label: '用户名称', prop: 'name' },
          { label: '用户电话', prop: 'phone' },
          { label: '车辆类型', prop: 'car_type' },
          { label: '车排量', prop: 'series' },
          { label: '用油名称', prop: 'oil_name' },
          { label: '投诉内容', prop: 'content', popover: true },
          { label: '投诉时间', prop: 'create_time' },
        ],
        follow: [ //关注度table label
          { label: '头像', head_pic: 'head_pic' },
          { label: '用户昵称', prop: 'nick_name' },
          { label: '性别', prop: 'sex' },
          { label: '关注时间', prop: 'attent_time' }
        ],
        params: {
          pageSize: 5,
          page: 0, //当前页
          sid: null,  //维修厂id
        }
      },
      rewardQuery: {  //技师奖励详情
        data: [],
        total: 0,
        params: {
          pageSize: 5,
          page: 0,
          wid: null //技师id
        },
        Label: [  //技师奖励 table label
          { label: '邦保养卡号', prop: 'card_number', popover: true },
          { label: '用户名称', prop: 'name' },
          { label: '用户电话', prop: 'phone', popover: true },
          { label: '车牌号', prop: 'plate' }, { label: '车牌号', prop: 'plate' },
          { label: '车辆类型', prop: 'car_type' }, { label: '车排量', prop: 'series' },
          { label: '用油名称', prop: 'oil_name', popover: true },
          { label: '奖励金额', prop: 'reward' },
          { label: '服务时间', prop: 'create_time', popover: true },
          { label: '奖励类型', prop: 'type', stateType: ['邦保养', '文章奖励'] }]
      },
    }
  },
  props: {
    data: {
      type: Object || Array,
      default: {}
    }
  },
  filters: {
    address (val) { //过滤详细地址 没有返回空 有则拼接
      return `${val.province || ''}${val.city || ''}${val.county || ''}${val.address || ''}`
    },
  },
  computed: {
    tableLabel () {
      let Query = this.listQuery, state = this.state;
      return state == 0 ? Query.technicianLabel : state == 1 ? Query.shutDownLabel : state == 2 ? Query.praiseLabel : state == 3 ? Query.complainLabel : Query.follow;  //根据state展示不同的table technician:技师数量详情   shutDown:关停次数详情
    }
  },
  methods: {
    init () {  //获取技师详情  sid 维修厂id
      this.$nextTick(async () => { //nextTick  在下次 DOM 更新循环结束之后执行延迟回调 如果不执行这个回调,每次获取到的都是上一次的数据,而不是最新的数据 
        const params = this.listQuery.params
        const res = this.state == 0
          ? await this.api.shopTechnician(params)
          : this.state == 1 ? await this.api.shutDownDetail(params)
            : this.state == 2 ? await this.api.commentDetail(params)
              : this.state == 3 ? await this.api.complainDetail(params)
                : await this.api.followDetail(params)
        this.listQuery.data = res.data.list || []
        this.listQuery.total = res.data.rows || 0
      })
    },
    rewardDetails (row = { id: this.rewardQuery.params.wid }) {  //技师详细-技师奖励
      let { id } = row
      this.rewardQuery.params.wid = id  //存储技师id,防止当前页发生改变时拿不到技师id
      this.dialogVisible.reward = true  //打开详情弹框
      this.$nextTick(async () => {
        const res = await this.api.technicianAward(this.rewardQuery.params)
        this.rewardQuery.data = res.data.list || []
        this.rewardQuery.total = res.data.rows || 0;
      })
    },
  },
}
</script>

<style scoped rel="stylesheet/scss" lang="scss">
@import "src/styles/variables";
.table {
  width: 100%;
  tr {
    padding: 20px 0;
    td:first-child {
      text-align: left;
    }
    td {
      border-bottom: 1px dashed #ccc;
      text-align: right;
      padding: 8px 0;
      a {
        color: $Wathet;
      }
    }
  }
}
</style>
